<!-- 我的发布 -->
<template>

  <div class="pag" >
    <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll">
    <div class="borrow-list">
      <div class="borrow-head" v-if="rentViolationNum">您的租借行为已发生<span>{{  rentViolationNum }}</span>次违规，请慎重发单</div>
      <div class="borrow-body">
          <div class="borrow-item" v-for="(item, index) in list" :key="item.orderNo">
            <div class="borrow-item-top">
              <div class="b-time">{{ item.createTime }}</div>
              <div class="b-btn" @click="revokeHandle(item, index)">撤销</div>
            </div>
            <div class="borrow-item-main">
              <div class="borrow-item-data">
                <label>预计租借</label>
                <p>{{ item.totalNum }}块</p>
              </div>
              <div class="borrow-item-data">
                <label>已租借到</label>
                <p>{{ item.rentedNum }}块</p>
              </div>
              <div class="borrow-item-data">
                <label>租用时间</label>
                <p>{{ item.days }}天</p>
              </div>
              <div class="borrow-item-data">
                <label>出让收益比</label>
                <p>{{ item.scale }}%</p>
              </div>
            </div>
          </div>
      </div>
      <!-- 空数据展示页 -->
      <list-empty txt="暂无发布数据" v-if="list && list.length == 0"></list-empty>
    </div>
    </cube-scroll>
    <!-- 提示 -->
    <alert ref="confirm">
      是否要撤销该令牌租用订单？
      <template v-slot:footer>
        <div class="my-tools">
          <div @click="revokeConfirm(true)">是</div>
          <div @click="revokeConfirm(false)">否</div>
        </div>
      </template>
    </alert>
  </div>

</template>

<script>
    import listEmpty from 'cpnts/list-empty.vue'
    import alert from 'cpnts/alert.vue'
import tokenHead from 'cpnts/token-head.vue'
import { getRentMyOrder, rentCancelOrder, getRentViolationNum } from 'api'

  export default {
      components: {
          'tokenHead': tokenHead,
          'alert': alert,
          'listEmpty': listEmpty,
      },
    data() {
      return {
          rentViolationNum: 0,
          curIndex: null,
          curItem: null,
          list: null,
          options: {
              pullUpLoad: true
          }
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
          vm.resetData()
          vm.getData()
          vm.getRentViolationNum()
      })
    },
    methods: {
          resetData(){
              this.rentViolationNum = 0
              this.list = null
          },
        async getRentViolationNum(){
            try {
                let {data} = await getRentViolationNum({})
                this.rentViolationNum = data.num
            } catch (e) {
                this.toastTip(e.info)
            }
        },
        revokeHandle(item, index){
            this.curItem = item
            this.curIndex = index
            this.showRevokeConfirm()
        },
        revokeConfirm(result){
            if(result) {
              this.rentCancelOrder()
            }
            this.hideRevokeConfirm()
        },
        showRevokeConfirm(){
            this.$refs.confirm.show()
        },
        hideRevokeConfirm(){
            this.$refs.confirm.hide()
        },
        async rentCancelOrder(){
            if(this.isRentCancelOrder){
                return
            }
            this.isRentCancelOrder = true
            try {
                let {data} = await rentCancelOrder({
                    orderNo: this.curItem.orderNo
                })
                this.list.splice(this.curIndex, 1)
            } catch (e) {
                this.toastTip(e.info)
            }
            this.isRentCancelOrder = false
        },
        async onPullup() {
            let me = this
            let sc = this.$refs['scroll']
            if (me['list'].length < 20) {
                return this.getData()
            }

            let pagec = Math.floor((this.list.length - 20) / 20) + 1
            let pagey = (this.list.length - 20) % 20
            try {
                let {data} = await getRentMyOrder({
                    per: 20,
                    page: 1 + pagec
                })
                if (!data) {
                    sc.forceUpdate()
                    return
                }
                if (pagey) {
                    data.splice(0, pagey)
                }
                me['list'] = me['list'].concat(data)
                if (!data.length) {
                    sc.forceUpdate()
                } else {
                    this.$nextTick(() => {
                        sc.forceUpdate(true)
                    })
                }
            } catch (e) {
                this.toastTip(e.info)
                sc.forceUpdate()
            }


        },
        async getData() {
            let sc = this.$refs['scroll']
            try {
                let {data} = await getRentMyOrder({
                    per: 20,
                    page: 1
                })
                if (!data) {
                    this.list = []
                    sc.forceUpdate()
                    return
                }
                this['list'] = data
                this.$nextTick(() => {
                    sc.forceUpdate(true)
                })
            } catch (e) {
                this.toastTip(e.info)
                sc.forceUpdate()
            }
        },
        toastTip(info) {
            this.$warn(info)
        }
    }
  }
</script>

<style lang="scss" scoped>


  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow: hidden;
  }

  .my-bond {
    width:690px;
    min-height: 100px;
    height:100px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: 30px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    span {
      font-size:24px;
      color:rgba(113,118,140,1);
    }
    i {
      font-size:40px;
      font-weight:600;
      color:rgba(32,44,91,1);
      font-style: normal;
      flex: 1;
      padding-right: 28px;
      text-align: right;
    }
  }



  .my-btn {
    width:110px;
    height:60px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    margin-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
    font-weight:400;
    color:rgba(255,255,255,1);
    &:last-of-type {
      margin-right: 0;
    }
  }


  .my-btns1 {
    display: flex;
    justify-content: center;
    margin: 30px auto 0 auto;
    > div {
      width:330px;
      height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:32px;
      color:rgba(255,255,255,1);
      margin-right: 30px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .borrow-list {
    //background:rgba(255,255,255,1);
    padding: 0 30px 70px 30px;
    margin-top: 30px;
  }


  .borrow-head {
    text-align: center;
    font-size:26px;
    color:rgba(113,118,140,1);
    margin: 30px 0;
    span {
      color: #EB3257;
    }
  }

  .borrow-body {
    margin-top: 30px;
  }

  .borrow-item {
    height:188px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 6px 0px rgba(102,102,102,0.3);
    border-radius:14px;
    margin-bottom: 24px;
  }

  .borrow-item-top {
    padding-top: 12px;
    font-size:28px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 29px;
  }



  .b-time {
    width:259px;
    height:28px;
    background:rgba(23,62,143,.4);
    border-radius:0px 14px 14px 0px;
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .b-name {
    flex: 1;
    padding-left: 32px;
  }

  .b-btn {
    width:142px;
    height:52px;
    background:rgba(23,62,143,1);
    border-radius:10px 0px 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
    color:rgba(255,255,255,1);
  }

  .borrow-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 31px;
  }

  .borrow-item-data {
    text-align: center;
    &:first-of-type {
      text-align: left;
    }
    &:last-of-type {
      text-align: right;
    }
    label {
      font-size:24px;
      color:rgba(113,118,140,1);
      margin-bottom: 18px;
      display: block;
    }
    p {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
    }
  }

  .my-tools {
    display: flex;
    height: 100%;
    div {
      flex: 1;
      border-right: 2px solid #D0D4E4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }


</style>













